<template>
	<view class="wp">
		<!-- <view class="s_href" @click="$navTo('/pages/userservice/regionList')">服务明细></view> -->
		<view class="s_input">
			<uni-data-checkbox v-model="level" :localdata="levelList" @change="changeLevel"></uni-data-checkbox>
		</view>
		<uni-data-picker v-if="level==1" placeholder="请选择省" popup-title="请选择" :map="{text:'areaname',value:'id'}" :localdata="provinceList" v-model="provinceId" @change="onchangeJy"></uni-data-picker>
		<uni-data-picker v-if="level==2" placeholder="请选择省市" popup-title="请选择" :localdata="addressAreaList" v-model="cityId" @change="onchangeJy"></uni-data-picker>
		<uni-data-picker v-if="level==3" placeholder="请选择省市区/县" popup-title="请选择" :localdata="addressList" v-model="areaId" @change="onchangeJy"></uni-data-picker>
		<view class="s_input">
			<label for="">绑定店铺：</label>
			<input type="number" v-model="supplier_uid" placeholder="请输入店铺ID" @input="changeId">
			<view class="s_query" @click="queryMember">查询</view>
		</view>
		<view class="query_result" v-if="info.supname">
		<!-- <view class="query_result"> -->
			<view class="q_tit">查询结果如下</view>
			<view class="q_head">基础信息</view>
			<view class="q_content">
				<image :src="info.logo"></image>
				<view class="q_info">
					<view>店铺名称：{{info.supname}}</view>
					<view>电话：{{info.principalmobile}}</view>
				</view>
			</view>
			<view class="q_head">地址</view>
			<view>{{info.address_name}}</view>
		</view>
		<view class="s_input">
			<label for="">分公司名称：</label>
			<input type="text" v-model="company_name" placeholder="请输入分公司名称">
		</view>
		<view class="totalBtn" @click="submit">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				supplier_uid: '',
				info: [],
				level: 1,
				company_name: '',
				addressId: '',
				provinceId: '',
				cityId: '',
				areaId:'',
				levelList: [{
					text: '省',
					value: 1
				}, {
					text: '市',
					value: 2
				}, {
					text: '区/县',
					value: 3
				}],
				addressList: [], //省市区
				addressAreaList: [], //省市
				provinceList: []//省
			}
		},
		onLoad() {
			this.getAddressProvince();
			this.getAddressArea();
			this.getAddress();
		},
		methods: {
			changeId(){
				this.info = [];
			},
			queryMember(){
				this.info = [];
				if(!this.supplier_uid) return this.$api.msg('请输入店铺ID');
				this.$axios('RegionalService/getSupplier','POST','regional',{
						supplier_uid: this.supplier_uid
					}).then(res=>{
					if(res.data.code == 200){
						this.info = res.data.data.data;
					}
				})
			},
			submit(){
				if(this.level==1&&this.provinceId=='') return this.$api.msg('请选择省');
				if(this.level==2&&this.cityId=='') return this.$api.msg('请选择省市');
				if(this.level==3&&this.areaId=='') return this.$api.msg('请选择省市区/县');
				// if(!this.company_name) return this.$api.msg('请输入分公司名称');
				if(this.info.supname&&this.supplier_uid!=''){
					uni.showModal({
						title: '提示',
						content: '请确认信息',
						success: res=> {
							if (res.confirm) {
								this.$axios('RegionalService/addCompany','POST','regional',{
									supplier_uid: this.supplier_uid,
									addressId: this.addressId,
									company_name: this.company_name,
									level: this.level
								}).then(res=>{
									if(res.data.code == 200){
										this.$api.msg(res.data.data);
									}
								})
							}
						}
					});
				}else{
					return this.$api.msg('请先查询');
				}
			},
			onchangeJy(e) {
				let data = e.detail.value;
				if(data.length==0){
					this.provinceId = '';
					this.cityId = '';
					this.areaId = '';
				}
				if(data.length==1){
					this.provinceId = e.detail.value[0].value;
					this.addressId = this.provinceId;
				}
				if(data.length==2){
					this.provinceId = e.detail.value[0].value;
					this.cityId = e.detail.value[1].value;
					this.addressId = this.cityId;
				}
				if(data.length==3){
					this.provinceId = e.detail.value[0].value;
					this.cityId = e.detail.value[1].value;
					this.areaId = e.detail.value[2].value;
					this.addressId = this.areaId;
				}
			},
			changeLevel(){
				this.provinceId = '';
				this.cityId = '';
				this.areaId = '';
				this.addressId = '';
			},
			// 省市区
			getAddress() {
				this.$axios('HfMerchantDataEnt/getAddress', "POST", 'supplier').then(res => {
					if (res.data.code == 200) {
						this.addressList = res.data.data;
					}
				})
			},
			// 省市
			getAddressArea() {
				this.$axios('HfMerchantDataEnt/getAddressShort', "POST", 'supplier').then(res => {
					if (res.data.code == 200) {
						this.addressAreaList = res.data.data;
					}
				})
			},
			// 省
			getAddressProvince() {
				this.$axios('getaddress/info', "POST", 'shop').then(res => {
					if (res.data.code == 200) {
						this.provinceList = res.data.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
		padding-bottom: 120rpx;
	}
	.wp{
		padding: 0 20rpx 20rpx;
		padding-bottom: 100rpx;
	}
	.s_input{
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;
		padding: 0 30rpx;
		margin-top: 20rpx;
		input{
			flex: 1;
		}
		.s_query{
			width: 104rpx;
			line-height: 54rpx;
			background: #8615E1;
			border-radius: 27rpx;
			color: #FFFFFF;
			font-weight: 600;
			text-align: center;
		}
	}
	.uni-data-tree{
		background: #fff;
		margin-top: 20rpx;
	}
	.query_result{
		.q_tit{
			text-align: center;
			color: #999999;
			margin: 40rpx auto 20rpx;
		}
		.q_content{
			padding: 10rpx 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.q_info{
				flex: 1;
				line-height: 50rpx;
			}
			image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}
		}
		.q_head{
			margin-bottom: 10rpx;
			margin-top: 20rpx;
			color: #666;
		}
	}
	.s_tip{
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #8615E1;
		justify-content: center;
		height: 80rpx;
	}
	.s_href{
		color: #8615E1;
	    font-size: 30rpx;
	    font-weight: 600;
		text-align: right;
	}
</style>
